<template>
  <div class='homeContent'>
	<a-row :gutter="16">
		<a-col class="gutter-row" :span="6">
			<div class="card card-stats">
	                <div class="m-card-header  card-header-icon">
	                  <div class="card-icon card-header-success ">
	                    <a-icon type="barcode" />
	                  </div>
	                 <a-statistic title="当前在线用户" :value="onlineUser"/>
	                </div>
	                <div class="card-footer">
	                  <div class="stats">
	                    当前在线用户
	                  </div>
	                </div>
              </div>
		</a-col>
		<a-col class="gutter-row" :span="6">
			<div class="card card-stats">
	                <div class="m-card-header  card-header-icon">
	                  <div class="card-icon card-header-info ">
	                    <a-icon type="appstore" />
	                  </div>
	                 <a-statistic title="累计访问量" :value="loginCount"/>
	                </div>
	                <div class="card-footer">
	                  <div class="stats">
	                    累计访问量
	                  </div>
	                </div>
              </div>
		</a-col>
		<a-col class="gutter-row" :span="6">
			<div class="card card-stats" style="cursor:pointer"  @click="gotoYCZH">
	                <div class="m-card-header  card-header-icon">
	                  <div class="card-icon card-header-danger ">
	                    <a-icon type="warning" />
	                  </div>
	                 <a-statistic title="访问异常账户" :value="loginFailedCount"/>
	                </div>
	                <div class="card-footer">
	                  <div class="stats">
	                    访问异常账户
	                  </div>
	                </div>
              </div>
		</a-col>
		<a-col class="gutter-row" :span="6">
			<div class="card card-stats">
	                <div class="m-card-header  card-header-icon">
	                  <div class="card-icon card-header-primary ">
	                    <a-icon type="apartment" />
	                  </div>
	                 <a-statistic title="客户端在线量" :value="appLogin"/>
	                </div>
	                <div class="card-footer">
	                  <div class="stats">
	                    客户端在线量
	                  </div>
	                </div>
              </div>
		</a-col>
	</a-row>
	<a-row :gutter="16">
		<a-col class="gutter-row" :span="6">
			<div class="card card-stats" style="cursor:pointer" @click="gotoWSP">
	                <div class="m-card-header  card-header-icon">
	                  <div class="card-icon card-header-warning ">
	                    <a-icon type="file-done" />
	                  </div>
	                 <a-statistic title="待审批用户数" :value="approvalUser"/>
	                </div>
	                <div class="card-footer">
	                  <div class="stats">
	                    待审批用户数
	                  </div>
	              </div>
               </div>
		</a-col>
		<!--<a-col class="gutter-row" :span="6">
			<div class="card card-stats">
	                <div class="m-card-header  card-header-icon">
	                  <div class="card-icon card-header-rose ">
	                    <a-icon type="team" />
	                  </div>
	                 <a-statistic title="作业员在线数" :value="workingMan"/>
	                </div>
	                <div class="card-footer">
	                  <div class="stats">
	                    作业员在线数
	                  </div>
	              </div>
               </div>
		</a-col>-->
		<a-col class="gutter-row" :span="6">
			<div class="card card-stats" style="cursor:pointer" @click="gotoYSP">
	                <div class="m-card-header  card-header-icon">
	                  <div class="card-icon card-header-black ">
	                    <a-icon type="radar-chart" />
	                  </div>
	                 <a-statistic title="总用户数" :value="totalUser"/>
	                </div>
	                <div class="card-footer">
	                  <div class="stats">
	                    总用户数
	                  </div>
	              </div>
               </div>
		</a-col>
	</a-row>
	<a-row :gutter="16">
		<a-col class="gutter-row" :span="6">
			<a-card style="width:98%">
		         <rytj-chart></rytj-chart>
		    </a-card>
		</a-col>
		<a-col class="gutter-row" :span="9">
			<a-card>
				<hyyh-chart></hyyh-chart>
			</a-card>
		</a-col>
		<a-col class="gutter-row" :span="9">
			<a-card>
				<bmrs-chart></bmrs-chart>
			</a-card>
		</a-col>
	</a-row>
  </div>
</template>

<script>
import {GETAPPROVALUSER,GETTOTALUSER,GETONLINEUSER,GETLOGINCOUNT,GETLOGINFAILEDCOUNT,GETAPPLOGIN,GETWORKINGMAN} from '@/../static/js/apis.js'
import RYTJChart from './components/RYTJChart'
import HYYHChart from './components/HYYHChart'
import BMRSChart from './components/BMRSChart'
export default {
  name: 'shortcutMenu',
  components:{
  	rytjChart: RYTJChart,
  	hyyhChart: HYYHChart,
  	bmrsChart: BMRSChart,
  },
  data () {
  	return {
  		onlineUser:'',
  		loginCount:'',
  		loginFailedCount:'',
  		appLogin:'',
  		approvalUser:'',
     		workingMan:'',
     		totalUser:''
  	}
  },
  methods: {
  	 /*获取静态数据*/
      getStaticData() {
      	 let self = this
      	 GETONLINEUSER('', function (res) {
	         self.onlineUser=res.data
	       })
      	 GETLOGINCOUNT('', function (res) {
	         self.loginCount=res.data
	       })
      	  GETLOGINFAILEDCOUNT('', function (res) {
	         self.loginFailedCount=res.data
	       })
      	   GETAPPLOGIN('', function (res) {
	         self.appLogin=res.data
	       })
	       GETAPPROVALUSER('', function (res) {
	         self.approvalUser=res.data
	       })
	        GETWORKINGMAN('', function (res) {
	         self.workingMan=res.data
	       })
	        GETTOTALUSER('', function (res) {
	         self.totalUser=res.data
	       })
      },
      gotoWSP(){
	     this.$router.push({path: '/userList', query: {system: '权限管理',type:'WSP'}})
	     this.$store.commit('changeFirstNavSelected', '1')
	 },
	 gotoYSP(){
	     this.$router.push({path: '/userList', query: {system: '权限管理',type:'YSP'}})
	     this.$store.commit('changeFirstNavSelected', '1')
	 },
	 gotoYCZH(){
	     this.$router.push({path: '/userList', query: {system: '权限管理',type:'YCZH'}})
	     this.$store.commit('changeFirstNavSelected', '1')
	 },
  },
  created () {
   	 this.getStaticData()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*快捷菜单*/
.homeContent{
	width: 94%;
	margin: 20px 3%;
}
.card {
    border: 0;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 2px;
    color: #333;
    background: #fff;
    width: 98%;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    font-size: .875rem;
}
.card-stats .m-card-header{
    padding: .75rem 1.25rem;
}
.card-stats .m-card-header.card-header-icon{
	text-align: right;

}
.card  .card-icon{
    border-radius: 3px;
    padding: 12px;
    margin-top: -40px;
    float: left;
    color: #fff
}
.card-header-success{
	background: linear-gradient(60deg,#66bb6a,#43a047);
	box-shadow:  0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(76,175,80,.4);
}
.card-header-info{
	background: linear-gradient(60deg,#26c6da,#00acc1);
	box-shadow:   0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(0,188,212,.4);
}
.card-header-danger{
	background: linear-gradient(60deg,#ef5350,#e53935);
	box-shadow:   0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(244,67,54,.4);
}
.card-header-primary{
	background: linear-gradient(60deg,#ab47bc,#8e24aa);
	box-shadow:   0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(156,39,176,.4);
}
.card-header-warning{
	background: linear-gradient(60deg,#ffa726,#fb8c00);
	box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(255,152,0,.4);
}
.card-header-rose{
	background: linear-gradient(60deg,#ec407a,#d81b60);
	box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(233,30,99,.4);
}
.card-header-black{
    background: linear-gradient(60deg, #263238, #212121);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(33, 33, 33,.4);
}
.card  .card-icon i{
    font-size: 42px;
    line-height: 56px;
    width: 56px;
    height: 56px;
    text-align: center;
}
/deep/.ant-statistic .ant-statistic-title{
	font-size: 18px!important
}
/deep/.ant-statistic .ant-statistic-content{
	font-size: 32px!important
}
</style>
